<template>
  <demoBlock title="动态设置选项" padding>
    <vcu-picker
      title="标题"
      ref="picker"
      :columns="columns"
      @change="onChange"
    />
  </demoBlock>
</template>


<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
     const picker = ref(null);

    const cities = {
      浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      福建: ['福州', '厦门', '莆田', '三明', '泉州'],
    };
    const columns = [
      { values: Object.keys(cities) },
      { values: cities['浙江'] },
    ];

    const onChange = (values) => {
      picker.value.setColumnValues(1, cities[values[0]]);
    };

    return {
      picker,
      columns,
      onChange,
    };
  },
});
</script>